<template>
  <el-date-picker
    v-model="state.daterange"
    type="daterange"
    unlink-panels
    range-separator="~"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :shortcuts="shortcuts"
    format="YYYY/MM/DD"
    value-format="YYYY-MM-DD HH:mm:ss"
    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
    @change="(val) => emit('update:value', val)"
    :clearable="props.clearable"
  />
</template>
<script>
const now = new Date()
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999)
export const shortcuts = [
  {
    text: '当天',
    value: () => {
      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      return [start, end]
    }
  },
  {
    text: '最近7天',
    value: () => {
      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      return [start, end]
    }
  },
  {
    text: '最近30天',
    value: () => {
      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      return [start, end]
    }
  }
]
</script>
<script setup>
const props = defineProps({
  daterange: {
    type: Array
  },
  shortcutsParams: {
    type: Array,
    default: () => shortcuts
  },
  clearable: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:value'])

const state = reactive({ daterange: [] })
watch(
  () => props.daterange,
  (val) => {
    state.daterange = val
  },
  { immediate: true, deep: true }
)
</script>
<style lang="scss" scoped></style>
